import notificationItemTemplate from "./NotificationItem.html";
import { DomUtils } from "../../../utils/DomUtils";

export class NotificationItem {
  constructor(data = {}) {
    this.data = {
      id: 0,
      type: "default",
      title: "",
      time: "",
      message: "",
      bgClass: "bg-primary",
      icon: "feather feather-bell",
      read: false,
      ...data,
    };
  }

  render() {
    const replacements = {
      title: this.data.title || "",
      time: this.data.time || "",
      message: this.data.message || "",
      iconHtml: this._getIconHtml(),
      readClass: this.data.read ? "read-notification" : "unread-notification",
    };

    let template = notificationItemTemplate;
    Object.entries(replacements).forEach(([key, value]) => {
      template = template.replace(new RegExp(`{{${key}}}`, "g"), value);
    });

    // 使用 DomUtils 将模板字符串转换为 DOM 元素
    //return DomUtils.convertToDom(template);
    return template;
  }

  _getIconHtml() {
    return `
      <div class="notify-icon ${this.data.bgClass}">
        <i class="${this.data.icon}"></i>
      </div>
    `;
  }
}
